<template>
  <div class="class-index">
    <div class="course-content-data clear">
      <template>
        <el-select v-model="level_status" placeholder="请选择" @change="seachData()">
          <el-option v-for="item in statusOption" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </template>
      <router-link to="/course2/class-list" class="fr">评课量表</router-link>
      <span>评级为A的公开课能进行回看</span>
    </div>
    <div class="reflect-cont">
      <ul>
        <li class="reflect-list clear" v-for="(item,index) in listData" :key="index">
          <div class="reflect-list-l fl">
            <h3>{{item.name}}</h3>
            <div>
              <span>{{teacher_name}}</span>
              <span>{{item.school_name}}</span>
              <span>{{item.start_time|datefmt('MM-DD')}} {{item.start_time|datefmt('HH:mm')}} - {{item.end_time|datefmt('HH:mm')}}</span>
            </div>
          </div>
          <div class="reflect-list-r fr" v-if="item.level===null">
            <router-link class="entry-reflect" style="margin-left: 50%;" :to="{path: '/course2/video', query: {id: item.id,name:item.name}}">去评级</router-link>
          </div>
          <div class="reflect-list-r fr" v-else>
            <strong class="fl">等级：<i>{{item.level}}</i></strong>
            <router-link class="fr" :to="{path: '/course2/video', query: {id: item.id,name:item.name}}">查看</router-link>
          </div>
        </li>
      </ul>
      <div class="excellent-page">
        <el-pagination v-if="listParam.data_sum>10" background class="pageing" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParam.page_index" :page-sizes="[10, 20, 30, 40, 50, 100]" :page-size="listParam.page_size" layout="total, sizes, prev, pager, next, jumper" :total="listParam.data_sum">
        </el-pagination>
      </div>
    </div>
    <div class="dependent" v-if="placeholder">
      <i class="ipng image_state01"></i>
      <p>还没发现任何相关的内容哦~</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      teacher_name: this.$store.getters.userInfo.name,
      activeName: "1",
      placeholder: false,
      enclosureVisible: false,
      level_status: 2,
      statusOption: [
        {
          value: 2,
          label: "全部状态"
        },
        {
          value: 0,
          label: "未评价"
        },
        {
          value: 1,
          label: "已评价"
        }
      ],
      listParam: {
        level_status: 2,
        page_index: 1,
        page_size: 10,
        data_sum: 0
      },
      listData: []
    };
  },
  created() {
    this.getList();
  },
  filters: {
    datefmt: function(input, fmtstring) {
      var mydate = new Date(input);
      var y = mydate.getFullYear();
      var m = mydate.getMonth() + 1;
      var d = mydate.getDate();
      var h = mydate.getHours() < 10 ? '0'+ mydate.getHours()  : mydate.getHours() ;
      var mi = mydate.getMinutes() < 10 ? '0'+ mydate.getMinutes()  : mydate.getMinutes() ;
      var s = mydate.getSeconds();
      var date1 = new Date();
      var y1 = date1.getFullYear();
      var m1 = date1.getMonth() + 1;
      var d1 = date1.getDate();
      if (fmtstring == "charToday") {
        if (y === y1 && m === m1 && d === d1) {
          return "今天";
        } else {
          return m + "月" + d + "日";
        }
      }
      if (fmtstring == "MM-DD") {
        return m + "月" + d + "日";
      }
      if (fmtstring == "HH:mm") {
        return h + ":" + mi;
      }
    }
  },
  methods: {
    enclosureView() {
      this.enclosureVisible = true;
    },
    getList() {
      let success = data => {
        this.listData = data.data.data;
        this.listParam.data_sum = data.data.data_sum;
        this.listParam.page_size = data.data.page_size;
        this.listParam.page_index = data.data.page_index;
        this.listData.length === 0
          ? (this.placeholder = true)
          : (this.placeholder = false);
      };
      this.$ajax.get("api/teachingschedule/schedule_level_list", {
        params: this.listParam,
        func: { success: success }
      });
    },
    seachData() {
      this.listParam.level_status = this.level_status;
      this.getList();
    },
    //分页
    handleSizeChange(val) {
      this.listParam.page_index = 1;
      this.listParam.page_size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listParam.page_index = val;
      this.getList();
    }
  }
};
</script>
<style lang="scss">
.reflect-list {
  h3{
    font-size: 16px;
    font-weight: 600;
  }
  .reflect-list-r {
    width: 200px;
  }
}
</style>

